<template>
  <el-drawer :model-value="visible" size="480px" :with-header="true" @close="$emit('close')">
    <template #header>
      <div class="drawer-header">
        <span class="title">变迁配置</span>
        <el-button type="primary" size="small" @click="handleSave">保存</el-button>
      </div>
    </template>

    <el-form :model="form" label-width="110px" class="drawer-body">
      <el-form-item label="名称">
        <el-input v-model="form.name" placeholder="请输入名称" />
      </el-form-item>
      <el-form-item label="编码">
        <el-input v-model="form.code" placeholder="请输入编码" />
      </el-form-item>
      <el-form-item label="优先级">
        <el-input-number v-model="form.priority" :min="0" :max="999" />
      </el-form-item>
      <el-form-item label="条件类">
        <el-input v-model="form.conditionClass" placeholder="Condition 类全名" />
      </el-form-item>
      <el-form-item label="后置类">
        <el-input v-model="form.afterClass" placeholder="After 类全名" />
      </el-form-item>
    </el-form>
  </el-drawer>
</template>

<script>
import { defineComponent, reactive, watch } from 'vue'

export default defineComponent({
  name: 'TransitionDrawer',
  props: {
    visible: { type: Boolean, default: false },
    edgeData: { type: Object, default: null }
  },
  emits: ['save', 'close'],
  setup(props, { emit }) {
    const form = reactive({ name: '', code: '', priority: 0, conditionClass: '', afterClass: '' })

    /**
     * 初始化表单数据
     * @returns {void}
     */
    const initForm = () => {
      const d = props.edgeData || {}
      form.name = d.name || ''
      form.code = d.code || ''
      form.priority = typeof d.priority === 'number' ? d.priority : 0
      form.conditionClass = d.conditionClass || ''
      form.afterClass = d.afterClass || ''
    }

    /**
     * 保存配置并向上抛出
     * @returns {void}
     */
    const handleSave = () => {
      emit('save', { ...form })
    }

    watch(() => props.edgeData, () => initForm(), { immediate: true })

    return { form, handleSave }
  }
})
</script>

<style scoped>
.drawer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.title { font-size: 16px; font-weight: 600; }
.drawer-body { padding: 8px 4px 16px 4px; }
</style>

